<template>
         <div>
               <header>
                     <i class="iconfont icon-weibiaoti-- fh" @click="back" ></i>
                     <span class="title">帮助与客服热线</span>
               </header>
               <h1 style="width:100%;height:1.88rem;"></h1>
               <div class="kf">
                      <div class="qq" @click='KeFuQQ'>
                            <i class="iconfont icon-qq"></i>
                            <span>网络客服</span>  
                      </div>
                      <a class="phone" :href="phone" >
                          <i class="iconfont icon-icon-test"></i>
                          <span>电话客服</span>
                      </a>
               </div>
               <h2 style="width:100%;height:3.2rem;margin-bottom:0.28rem"></h2>
               <main>
                     <ul>
                         <router-link tag="li" :to="{name:'jk'}" active-class="active" >
                                      借款相关
                         </router-link>
                         <router-link tag="li" :to="{name:'hk'}">
                                      还款相关
                         </router-link>
                         <router-link tag="li" :to="{name:'fy'}">
                                      费用相关
                         </router-link>
                         <router-link tag="li" :to="{name:'faq'}">
                                      常见问题
                         </router-link>
                     </ul>
                     <router-view></router-view>
               </main>
         </div>
</template>

<script>
export default {
      data(){
          return{
              qq:"",
              phone:"",
          }
      },
      methods:{
          back(){
              this.$router.push({name:'my'})
          },
          KeFuQQ(){
            if (plus.os.name == "iOS") {  
                plus.runtime.launchApplication({  
                    action: "mqq://im/chat?chat_type=wpa&uin="+this.qq+"&version=1&src_type=web"  
                }, function(e) {  
                    plus.nativeUI.confirm("检查到您未安装qq，请先到appstore搜索下载？", function(i) {  
                        if (i.index == 0) {  
                            iosAppstore("itunes.apple.com/cn/app/mqq/");  
                        }  
                    });  
                });  
            }else if (plus.os.name == "Android") { 
                var main = plus.android.runtimeMainActivity(); 
                var Intent = plus.android.importClass('android.content.Intent'); 
                var Uri = plus.android.importClass('android.net.Uri'); 
                var intent = new Intent(Intent.ACTION_VIEW, Uri.parse("mqqwpa://im/chat?chat_type=wpa&uin="+this.qq)); 
                main.startActivity(intent); 
            } 
        },
      },
      mounted(){
          this.$http.get('/api/my/server')
              .then(res=>{
                   if(res.data.code=="200"){
                       this.qq=res.data.qq
                       this.phone = res.data.tel
                   }
              })
      }
}
</script>

<style lang="less" scoped>
        /**{ touch-action: none; }*/
        header{
               position:fixed;
               top:0;
               width:100%;
               height:1.88rem;
               display:flex;
               position:fixed;
               top:0;
               z-index:100;
               background: #fff;
         }
         .fh{
             width:2.1rem;
             line-height:1.88rem;
             text-align:center;
             z-index:100; 
             color:#333333;
             font-size:0.76rem;  
         }
         .title{
               font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#333333;
               letter-spacing:0.02rem;
               position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
         .kf{
             width:100%;
             height:3.2rem;
             background:#fff;;
             display:flex;
             align-items:center;
             position:fixed;
             top:1.88rem;
             z-index:999;
         }
         .qq{
             width:50%;
             height:1.9rem;
             border-right:0.02rem solid #f3f3f3;
             display:flex;
             flex-direction:column;
             justify-content:space-between;
             align-items:center;
                     i{
                         font-size:1.4rem;
                         color:#228cfd;
                     }
                  span{
                      font-size:0.5rem;
                      color:#757575;
                      
                  }
         }
         .phone{
             flex:1;
             height:1.9rem;
             border-right:0.02rem solid #f3f3f3;
             display:flex;
             flex-direction:column;
             justify-content:space-between;
             align-items:center;
                     i{
                         font-size:1.4rem;
                         color:#228cfd;
                     }
                  span{
                      font-size:0.5rem;
                      color:#757575;
                      
                  }
         }
         main{
             width:90%;
             height:5rem;
             background:#fff;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             border-radius:0.18rem;
                 ul{
                     width:100%;
                     height:1.72rem;
                     border-bottom:0.04rem solid #ebebeb;
                     display:flex;
                         .active{
                            border-bottom:0.08rem solid #1b88fd;
                            color:#1b88fd;
                         }
                         li{
                             width:25%;
                             text-align:center;
                             line-height:1.7rem;
                             font-size: 0.52rem;
                             color:#666666;
                         }
                 }
         }
</style>

